{%extends 'base_blog.html'  %}
{% block body %}

<main class="container">
  <div class="p-4 p-md-5 mb-4 rounded text-bg-secondary">
    <div class="col-md-6 px-0">
      <h1  class="display-4 fw-normal">python期末作品</h1>
      <p class="lead my-3">前修课程：网页设计制作、TCP/IP</p>
      <p class="lead my-3">制作人：陈蔚</p>
         <p class="lead mb-0"><a class="text-white fw-bold" href="{{ url_for('entry_page') }}" >元音查询</a></p>
    </div>
  </div>

  <div class="row mb-2">
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">List实践</strong>
          <h3 class="mb-0">购物车项目</h3>
          <p class="card-text mb-auto"></p>
          <a href="#" class="stretched-link">富婆请进</a>
        </div>
        <div class="col-auto d-none d-lg-block">
          <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">购买商品的学习项目</text></svg>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-success">控制流</strong>
          <h3 class="mb-0">猜数字项目</h3>
          <p class="mb-auto"></p>
          <a href="#" class="stretched-link">运气王请进</a>
        </div>
        <div class="col-auto d-none d-lg-block">
          <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">猜数字游戏学习项目</text></svg>

        </div>
      </div>
    </div>
  </div>

  <div class="row g-5">
    <div class="col-md-8">
      <h3 class="pb-4 mb-4  border-bottom">
      陈蔚的博客
      </h3>

      <article class="blog-post">
        <h2 class="blog-post-title mb-1">示例笔记</h2>
        <p class="blog-post-meta">December 15, 2022 by <a href="https://gitee.com/ceciliacmoyun/python_cw">Chen Wei
        </a></p>

        <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
        <hr>
        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
        <h2>Blockquotes</h2>
        <p>This is an example blockquote in action:</p>
        <blockquote class="blockquote">
          <p>Quoted text goes here.</p>
        </blockquote>
        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
        <h3>Example lists</h3>
        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
        <ul>
          <li>First list item</li>
          <li>Second list item with a longer description</li>
          <li>Third list item to close it out</li>
        </ul>
        <p>And this is an ordered list:</p>
        <ol>
          <li>First list item</li>
          <li>Second list item with a longer description</li>
          <li>Third list item to close it out</li>
        </ol>
        <p>And this is a definition list:</p>
        <dl>
          <dt>HyperText Markup Language (HTML)</dt>
          <dd>The language used to describe and define the content of a Web page</dd>
          <dt>Cascading Style Sheets (CSS)</dt>
          <dd>Used to describe the appearance of Web content</dd>
          <dt>JavaScript (JS)</dt>
          <dd>The programming language used to build advanced Web sites and applications</dd>
        </dl>
        <h2>Inline HTML elements</h2>
        <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
        <ul>
          <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
          <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
          <li>Abbreviations, like <abbr title="HyperText Markup Language">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
          <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
          <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
          <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
        </ul>
        <p>Most of these elements are styled by browsers with few modifications on our part.</p>
        <h2>Heading</h2>
        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
        <h3>Sub-heading</h3>
        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
        <pre><code>Example code block</code></pre>
        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
      </article>

      <nav class="blog-pagination" aria-label="Pagination">
        <a class="btn btn-outline-primary rounded-pill" href="#">旧的</a>
        <a class="btn btn-outline-secondary rounded-pill disabled">新的</a>
      </nav>

    </div>

    <div class="col-md-4">
      <div class="position-sticky" style="top: 2rem;">
        <div class="p-4 mb-3 bg-light rounded">
          <h4 class="fst-italic">关于我</h4>
          <p class="mb-0"> 大家好，我是陈蔚，今年大二。我来自广州南方学院文学与传媒学院，专业是网络与新媒体。我喜欢敲代码，爱python，还喜欢音乐、影视。 想学好python没有捷径，平时一定要多实践，勤加练习，才能有所精进！希望毕业后能遇到一份工作需要写python，这时候我就能自信站出来说“这题我真会！” 这半年来最值得骄傲的一件事：认识许老师，学习python。</p>
        </div>

        <div class="p-4">
          <h4 class="fst-italic">重要时间</h4>
          <ol class="list-unstyled mb-0">
            <li><a href="#">March 2022</a></li>
            <li><a href="#">February 2022</a></li>
            <li><a href="#">January 2022</a></li>
            <li><a href="#">December 2022</a></li>
            <li><a href="#">November 2022</a></li>
            <li><a href="#">October 2022</a></li>
            <li><a href="#">September 2022</a></li>
            <li><a href="#">August 2022</a></li>
            <li><a href="#">July 2022</a></li>
            <li><a href="#">June 2022</a></li>
            <li><a href="#">May 2022</a></li>
            <li><a href="#">April 2022</a></li>
          </ol>
        </div>

        <div class="p-4">
          <h4 class="fst-italic">联系我</h4>
          <ol class="list-unstyled">
            <li>邮箱: chenw210086@stu.nfu.edu.cn</li>
            <li>微信: Ceciliacmoyun </li>
            <li>手机: 88888888</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

</main>

{% endblock %}

